<template>
	<view>
        <u-field v-model="name" label="姓名" :clearable="false" placeholder="请填写姓名"></u-field>
        <!-- <u-field v-model="idNo" label="身份证号" :clearable="false" placeholder="请填写身份证号"></u-field> -->
        <u-field v-if="!hasPhone" v-model="phone" label="手机号" :clearable="false" placeholder="请填写手机号"></u-field>
        <u-field v-model="userPassword" label="密码" :clearable="false" password placeholder="请填写密码"></u-field>
        <u-field v-if="!hasPhone" v-model="verifyCode" label="验证码" :clearable="false" placeholder="请填写验证码">
			<u-button size="mini" slot="right" type="success" @click="getVerifyCode">{{codeText}}</u-button>
		</u-field>
		<button class="btn-signup" @click="signUp">注册</button>
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
        <u-toast ref="uToast" />
	</view>
</template>

<script>
    import Vue from 'vue';
	import md5Libs from "uview-ui/libs/function/md5";
	import { 
		userRegisterAPI,
		getVerifyAuthCodeAPI,
		sendVerifyByAuthCodeAPI,
	} from '../../api/login'

	const app = getApp()
	export default Vue.extend({
		data() {
			return {
				title: 'signup',
				hasPhone: false,
				phone: '',
				verifyCode: '',
				name: '',
				idNo: '',
				userPassword: '',
				openId: '',
				codeText: ''
			}
		},
		onLoad(options) {
			this.phone = options.phone
			this.hasPhone = this.phone ? true : false
			this.verifyCode = options.verifyCode
			console.log(this.phone, this.verifyCode)
			this.openId = app.globalData.openId
		},
		methods: {
			signUp(){
				userRegisterAPI({
					name: this.name,
					phoneNumber: this.phone,
					userPassword: md5Libs.md5(this.userPassword),
					verifyCode: this.verifyCode,
					openId: this.openId
				}).then(res => {
					app.globalData.loginIn(() => {
						this.$refs.uToast.show({
				    	 	title: '注册成功！',
							type: 'success',
							callback: () => {
                   			 	this.$u.route({
                   			 	    type: 'tab',
                   			 	    url: 'pages/mine/mine'
                   			 	})
                    	    }
                    	})
					})
				}).catch(err => {
                    this.$refs.uToast.show({
				     	title: err,
				     	type: 'error',
                    })
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getVerifyCode(){
				if(this.phone.length !== 11) {
	                this.$refs.uToast.show({
				    	title: '请输入正确手机号',
				    	type: 'error',
                    })
                    return false
                }
				if(this.$refs.uCode.canGetCode) {
					getVerifyAuthCodeAPI({phoneNumber: this.phone}).then(res => {
						return sendVerifyByAuthCodeAPI({
                        phoneNumber: this.phone, 
                        authCode: res.authCode
                    })
					}).then(res => {
						// 通知验证码组件内部开始倒计时
						this.$refs.uToast.show({
					    	title: '验证码已发送',
					    	type: 'success',
                	    })
						this.$refs.uCode.start();
					}).catch(err => {
                	    console.log(err)
                	    this.$refs.uToast.show({
					    	title: err,
					    	type: 'error',
                	    })
                	})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';
.btn-signup{
	background-color: $theme-color;
	color: #fff;
	position: absolute;
	bottom: 100rpx;
	left: 10vw;
	width: 80vw;
	margin: 0 auto;
}
</style>
